<template>
  <div style="height: calc(100vh - 160px)">
    <crumbs @goBack="() => {}" :superiorMenu="['易制造']" currentMenu="看板">
      <span slot="content">
        <div class="topBox" style="height: 140px">
          <div class="itemBox" v-for="(item, index) in topArray" :key="index">
            <div class="rightBox">
              <div class="rightBot">{{ item.title }}</div>
              <div class="rightTop">{{ addThousandSeparator(item.number) }}</div>
            </div>
          </div>
        </div>
      </span>
    </crumbs>
    <div style="border-bottom: 1px solid #e8e8e8"></div>
    <!-- 生产实况模块 -->
    <a-card :bordered="false" title="生产实况" class="top-title">
      <div style="height: 130px; overflow-y: scroll">
        <a-timeline>
          <a-timeline-item v-for="(item, index) in timeLineList" :key="index">
            <div class="time-line-list">
              <div class="time-line-conent-num">{{ item.reportTime }}</div>
              <div class="time-line-conent">{{ item.realname }}</div>
              <div class="time-line-conent-num">
                {{ `合格数：${item.qualifiedNum},不合格数：${item.unqualifiedNum}` }}
              </div>
              <div class="time-line-conent">{{ item.serialName }}</div>
              <div class="time-line-conent">{{ item.processesName }}</div>
              <div class="time-line-conent">{{ item.orderCode }}</div>
            </div>
          </a-timeline-item>
        </a-timeline>
      </div>
    </a-card>
    <!-- <div style="height: 12px; background: #f0f2f5"></div> -->
    <a-card :bordered="false" style="height: calc(100vh - 172px)">
      <template #title>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <div style="font-size: 16px; color: #191f25; font-weight: bold">工单进度报表</div>
          <div class="table-operator">
            <a-tabs
              default-active-key="1"
              @change="tabChange"
              v-model="activeKey"
              :tabBarStyle="{ borderBottom: 'unset' }"
            >
              <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.title"> </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </template>
      <div>
        <a-table
          row-key="id"
          :key="tableKey"
          size="middle"
          :scroll="{ x: scrollX, y: 'calc(100vh - 300px)' }"
          :hideDefaultSelections="false"
          :columns="columns"
          :dataSource="modelList"
          :pagination="false"
          @change="tableChange"
          :row-selection="{ selectedRowKeys: selectedRowKeys, columnTitle: ' ', onChange: onSelectChange }"
          class="j-table-force-nowrap"
          :components="drag(columns, 'PRODUCTION_BOARD')"
        >
          <!-- 生产进度 -->
          <div style="display: flex;"slot="productionProcess" slot-scope="text, record">
            <div v-for="(item, index) in record.processesVos" :key="index">
              <div style="display: flex;flex-direction: column;align-items: center;margin: 0px 10px;">
                <a-progress
                  type="circle"
                  :percent="(item.produceCount / item.processesPlanProduceNum) * 100"
                  :strokeWidth="6"
                  :format="(_)=>progressFormat(_,item.produceCount, item.processesPlanProduceNum)"
                  :showInfo="true"
                  :width="40"
                  status="normal"
                  :strokeColor="checkStatus((item.produceCount / item.processesPlanProduceNum)*100)"
                />
                <span>{{ item.processesName || '-' }}</span>
              </div>
            </div>
          </div>
          <span slot="serialNumber" :title="record.serialNumber" slot-scope="text, record">
            {{ record.serialNumber }}
          </span>
          <!-- 6个字符控制 超出。。。 -->
          <span :title="text" slot="deviceCategoryText" slot-scope="text">
            {{ text }}
          </span>
          <span slot="actions" slot-scope="text, record">
            <span>
              <a @click="handleEdit(record)" href="#">编辑</a>
              <a-divider type="vertical" />
              <a-dropdown>
                <a class="ant-dropdown-link">
                  更多
                  <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a-button type="link" @click="handleOpen(record, '0')" v-if="record.programStatus == '1'"
                      >启用
                    </a-button>
                    <a-button @click="handleOpen(record, '1')" type="link" v-else>禁用 </a-button>
                  </a-menu-item>
                  <a-menu-item>
                    <a-button type="link" @click="handleDelete(record)">删除</a-button>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </span>
          </span>
          <!-- 行信息 -->
          <span
            slot="orderCode"
            :title="record.orderCode"
            slot-scope="text, record"
            class="btn-text"
            @click="handleDetail(record)"
          >
            {{ record.orderCode }}
          </span>
          <span slot="reporter" :title="record.reporterText" slot-scope="text, record">{{ record.reporterText }}</span>

          <span slot="amount" :title="commafyTofixed(record.amount, 2)" slot-scope="text, record">{{
            commafyTofixed(record.amount, 2)
          }}</span>
          <span slot="payAmount" :title="commafyTofixed(record.payAmount, 2)" slot-scope="text, record">{{
            commafyTofixed(record.payAmount, 2)
          }}</span>
          <span slot="unPayAmount" :title="commafyTofixed(record.unPayAmount, 2)" slot-scope="text, record">{{
            commafyTofixed(record.unPayAmount, 2)
          }}</span>
          <span
            slot="programStatusText"
            :title="text"
            slot-scope="text, record"
            :style="{ color: taskStatusCheck(record.programStatus) }"
            >{{ text }}</span
          >
          <span slot="statusTxt" slot-scope="text, record">
            <span :style="{ color: getStatusColor(record.status) }">{{ record.statusTxt || '-' }}</span>
          </span>
          <!-- 输入框搜索 -->
          <div
            slot="searchDropdown"
            slot-scope="{ selectedKeys, confirm, clearFilters, column }"
            class="searchWorkOreder"
          >
            <a-input
              placeholder="请输入"
              v-model="filterForm[column.dataIndex]"
              style="width: 188px; display: block"
              @pressEnter="handleSearch"
            />
            <a-button
              type="primary"
              style="width: 80px; margin-left: 20px; display: block"
              @click="() => handleSearch(selectedKeys, confirm, column.dataIndex, clearFilters)"
            >
              搜索
            </a-button>
          </div>
          <a-icon
            slot="searchIcon"
            slot-scope="filtered"
            type="search"
            :style="{ color: filtered ? '#108ee9' : undefined }"
          />
          <!-- 选择搜索 -->
          <div slot="selectDropdown" slot-scope="{ confirm, clearFilters, column }" class="searchWorkOreder">
            <a-select
              mode="multiple"
              placeholder="请选择"
              v-model="filterForm.statusTxt"
              allowClear
              style="width: 200px"
            >
              <a-select-option v-for="item in statusList" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
            <a-button
              type="primary"
              style="width: 80px; margin-left: 20px; display: block"
              @click="() => pubSearch(confirm, column.dataIndex, clearFilters)"
            >
              搜索
            </a-button>
          </div>
          <a-icon
            slot="selectIcon"
            slot-scope="filtered"
            type="filter"
            :style="{ color: filtered ? '#108ee9' : undefined }"
          />
          <!-- 选择搜索 -->
          <div slot="selectDropdown1" slot-scope="{ confirm, clearFilters, column }" class="searchWorkOreder">
            <a-tree-select
              v-if="column.dataIndex == 'category'"
              allow-clear
              v-model="filterForm[selectkeys(column.dataIndex)]"
              :multiple="false"
              placeholder="请选择"
              style="width: 200px"
              :tree-data="treeData"
              :replaceFields="replaceFields"
              :show-checked-strategy="SHOW_PARENT"
              search-placeholder="请选择"
              @change="treeChange"
            />
            <a-select
              v-if="column.dataIndex == 'goodsTypeText'"
              mode="multiple"
              placeholder="请选择"
              allowClear
              style="width: 188px"
              v-model="filterForm[selectkeys(column.dataIndex)]"
              @change="(v) => changeSelect(v, selectkeys(column.dataIndex))"
            >
              <a-select-option
                v-for="(item, i) in selectOptions(column.dataIndex)"
                :key="i"
                :value="item[column.selectValue]"
                >{{ item[column.selectText] }}</a-select-option
              >
            </a-select>
            <a-button
              type="primary"
              style="width: 80px; margin-left: 20px; display: block"
              @click="() => handleSearch(confirm, column.dataIndex, clearFilters)"
            >
              搜索
            </a-button>
          </div>
          <!-- 选择搜索 -->
          <div slot="selectDropdownSingle" slot-scope="{ confirm, clearFilters, column }" class="searchWorkOreder">
            <a-select
              placeholder="请选择"
              allowClear
              style="width: 188px"
              v-model="filterForm[selectkeys(column.dataIndex)]"
              @change="(v) => changeSelect(v, selectkeys(column.dataIndex))"
            >
              <a-select-option
                v-for="(item, i) in selectOptions(column.dataIndex)"
                :key="i"
                :value="item[column.selectValue]"
                >{{ item[column.selectText] }}</a-select-option
              >
            </a-select>
            <a-button
              type="primary"
              style="width: 80px; margin-left: 20px; display: block"
              @click="() => handleSearch(confirm, column.dataIndex, clearFilters)"
            >
              搜索
            </a-button>
          </div>
          <a-icon
            slot="selectIcon"
            slot-scope="filtered"
            type="filter"
            :style="{ color: filtered ? '#108ee9' : undefined }"
          />
          <!-- 日期搜索 -->
          <div slot="datePicker" slot-scope="{ confirm, clearFilters, column }" class="searchWorkOreder">
            <a-range-picker
              style="width: 188px"
              v-model="dateForm[column.dataIndex]"
              format="YYYY-MM-DD"
              :placeholder="['开始时间', '结束时间']"
              @change="(v) => onOk(v, column.dataIndex)"
            />
            <a-button
              type="primary"
              style="width: 80px; margin-left: 20px; display: block"
              @click="() => handleSearch(confirm, column.dataIndex, clearFilters)"
            >
              搜索
            </a-button>
          </div>
          <a-icon
            slot="dateIcon"
            slot-scope="filtered"
            type="filter"
            :style="{ color: filtered ? '#108ee9' : undefined }"
          />
          <!-- 人员选择 -->
          <div slot="selectPeople" slot-scope="{ confirm, clearFilters, column }" class="searchWorkOreder">
            <j-select-user-by-dep
              @changeRow="createChange"
              v-model="filterForm.createBys"
              :seldep="true"
              :modalWidth="1000"
              :limit="5"
              :multi="true"
              v-if="column.dataIndex == 'createByName'"
            ></j-select-user-by-dep>
            <j-select-user-by-dep
              @changeRow="updateChange"
              v-model="filterForm.updateBys"
              :seldep="true"
              :modalWidth="1000"
              :limit="5"
              :multi="true"
              v-if="column.dataIndex == 'updateByName'"
            ></j-select-user-by-dep>
            <a-button
              type="primary"
              style="width: 80px; margin-left: 20px; display: block"
              @click="() => handleSearch(confirm, column.dataIndex, clearFilters)"
            >
              搜索
            </a-button>
          </div>
        </a-table>
      </div>
      <SetColumn
        columnName="设置列"
        ref="SetColumn"
        v-if="showSetColumn"
        @sureBtn="sureBtn"
        @cancelBtn="showSetColumn = false"
      />
    </a-card>
    <workOrderDetail ref="workOrderDetail"></workOrderDetail>
  </div>
</template>
<script>
import SetColumn from '@/pubComponent/SetColumn.vue'
import crumbs from '@/components/crumbs.vue'
import {
  getNewColumns,
  subStrText,
  commafyTofixed,
  formatDate,
  camelCase2UnderLine,
  stringToObject,
} from '@/utils/util'
import { API } from '@/api/requestFzs'
import { APILX } from '@/api/requestLx'
import moment from 'dayjs'
import { httpAction, getAction, deleteAction, downFile, downFilePost } from '@/api/manage'
import { mapState } from 'vuex'
import { TreeSelect } from 'ant-design-vue'
import { ajaxGetDictItems, getEnableOne } from '@/api/api'
import { goodsList, categoryGetTree, getDictModel } from '@/api/goodsManagement'
import tableDragResize from '@/mixins/tableDragResize'
import tableDynamicField from '@/mixins/tableDynamicField'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
const treeData = []
// 表头
const allColumn = [
  {
    title: '工单编号',
    width: 180,
    ellipsis: true,
    dataIndex: 'orderCode',
    scopedSlots: {
      filterDropdown: 'searchDropdown',
      filterIcon: 'searchIcon',
      customRender: 'orderCode',
    },
  },
  {
    title: '物品编号',
    width: 150,
    ellipsis: true,
    dataIndex: 'serialNumber',
    scopedSlots: {
      filterDropdown: 'searchDropdown',
      filterIcon: 'searchIcon',
      customRender: 'serialNumber',
    },
  },
  {
    title: '物品名称',
    width: 150,
    ellipsis: true,
    dataIndex: 'serialName',
    scopedSlots: {
      filterDropdown: 'searchDropdown',
      filterIcon: 'searchIcon',
      customRender: 'serialName',
    },
  },
  {
    title: '规格',
    dataIndex: 'serialSpecifications',
    width: 150,
    ellipsis: true,
    scopedSlots: {
      filterDropdown: 'searchDropdown',
      filterIcon: 'searchIcon',
      customRender: 'serialSpecifications',
    },
  },
  {
    title: '状态',
    dataIndex: 'statusTxt',
    ellipsis: true,
    width: 110,
    scopedSlots: {
      // filterDropdown: 'selectDropdown',
      // filterIcon: 'selectIcon',
      customRender: 'statusTxt',
    },
  },
  {
    title: '生产进度',
    dataIndex: 'productionProcess',
    ellipsis: true,
    width: 300,
    scopedSlots: {
      customRender: 'productionProcess',
    },
  },
  {
    title: '单位',
    dataIndex: 'unitName',
    ellipsis: true,
    width: 110,
    scopedSlots: {
      customRender: 'unitName',
    },
  },
  {
    title: '计划生产数量',
    width: 150,
    dataIndex: 'planProduceNum',
    scopedSlots: {
      customRender: 'planProduceNum',
    },
  },
  {
    title: '计划开始时间',
    width: 150,
    dataIndex: 'planStartTime',
    scopedSlots: {
      customRender: 'planStartTime',
    },
  },
  {
    title: '计划完成时间',
    width: 150,
    dataIndex: 'planEndTime',
    scopedSlots: {
      customRender: 'planEndTime',
    },
  },
  {
    title: '已生产数量',
    width: 150,
    dataIndex: 'qualifiedNum',
    scopedSlots: {
      customRender: 'qualifiedNum',
    },
  },
  {
    title: '关联订单',
    width: 150,
    dataIndex: 'saleOrderCode',
    scopedSlots: {
      customRender: 'saleOrderCode',
    },
  },
  {
    title: '创建时间',
    width: 150,
    dataIndex: 'createTime',
    sorter: true,
    scopedSlots: {
      customRender: 'createTime',
    },
  },
  {
    title: '更新时间',
    width: 150,
    dataIndex: 'updateTime',
    sorter: true,
    scopedSlots: {
      customRender: 'updateTime',
    },
  },
  {
    title: '创建人',
    width: 150,
    dataIndex: 'createByName',
    scopedSlots: {
      filterDropdown: 'selectPeople',
      filterIcon: 'selectIcon',
      customRender: 'createByName',
    },
  },
  {
    title: '更新人',
    width: 150,
    dataIndex: 'updateByName',
    scopedSlots: {
      filterDropdown: 'selectPeople',
      filterIcon: 'selectIcon',
      customRender: 'updateByName',
    },
  },
  // 为了更新人不被删除
  {
    fixed: 'right',
    title: '操作',
    width: 50,
    dataIndex: 'actions',
    ellipsis: true,
    scopedSlots: { customRender: 'actions' },
  },
]
const actionArr = [
  // {
  //   fixed: 'right',
  //   title: '操作',
  //   width: 50,
  //   dataIndex: 'actions',
  //   ellipsis: true,
  //   scopedSlots: { customRender: 'actions' },
  // },
]
let startDate = moment().startOf('month').format('YYYY-MM-DD')
let endDate = moment().format('YYYY-MM-DD')
export default {
  mixins: [tableDragResize, tableDynamicField],
  data() {
    return {
      activeKey: 0,
      tabList: [
        {
          key: 0,
          title: '未开始',
        },
        {
          key: 1,
          title: '生产中',
        },
        {
          key: 2,
          title: '3天内到期',
        },
        {
          key: 3,
          title: '逾期未完工',
        },
        {
          key: 4,
          title: '今日完成',
        },
        {
          key: 5,
          title: '本月完成',
        },
      ],
      timeLineList: [],
      selectExportTitle: '',
      selectExportVisiable: false, // 导出弹窗
      selectExportParam: {}, // 导出参数
      filedKeys: '', // 导出字段
      fileName: '', // 导出文件名
      // 树
      treeData,
      SHOW_PARENT,
      //   treeSelectLael: '',
      replaceFields: {
        children: 'children',
        title: 'name',
        key: 'id',
        value: 'id',
      },
      // 头部按月搜索
      monthEnd: '',
      monthStart: '',
      now: null,
      // 头部配置
      topArray: [
        {
          title: '计划生产',
          number: '0',
        },
        {
          title: '已生产',
          number: '0',
        },
        {
          title: '不合格率',
          number: '0',
        },
        {
          title: '工单数',
          number: '0',
        },
        {
          title: '逾期工单数',
          number: '0',
        },
      ],

      typeList: [], //类型 字典值下拉数据
      dictOptionsDeviceCategory: [], //设备类别字典值下拉数据
      commafyTofixed,
      moment,
      actionArr,
      selectedRowKeys: [],
      selectedRows: [],
      subStrText,
      showFilter: false, // 筛选抽屉
      modelList: [], // 列表数据
      showSetColumn: false, // 显示
      //全选按钮
      listIndeterminate: false,
      listCheckAll: false,
      current: 1,
      total: 0,
      pageSize: 10,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      allColumn,
      columns: [
        {
          title: '工单编号',
          width: 180,
          ellipsis: true,
          dataIndex: 'orderCode',
          scopedSlots: {
            filterDropdown: 'searchDropdown',
            filterIcon: 'searchIcon',
            customRender: 'orderCode',
          },
        },
        {
          title: '物品编号',
          width: 150,
          ellipsis: true,
          dataIndex: 'serialNumber',
          scopedSlots: {
            filterDropdown: 'searchDropdown',
            filterIcon: 'searchIcon',
            customRender: 'serialNumber',
          },
        },
        {
          title: '物品名称',
          width: 150,
          ellipsis: true,
          dataIndex: 'serialName',
          scopedSlots: {
            filterDropdown: 'searchDropdown',
            filterIcon: 'searchIcon',
            customRender: 'serialName',
          },
        },
        {
          title: '规格',
          dataIndex: 'serialSpecifications',
          width: 150,
          ellipsis: true,
          scopedSlots: {
            filterDropdown: 'searchDropdown',
            filterIcon: 'searchIcon',
            customRender: 'serialSpecifications',
          },
        },
        {
          title: '状态',
          dataIndex: 'statusTxt',
          ellipsis: true,
          width: 110,
          scopedSlots: {
            // filterDropdown: 'selectDropdown',
            // filterIcon: 'selectIcon',
            customRender: 'statusTxt',
          },
        },
        {
          title: '生产进度',
          dataIndex: 'productionProcess',
          ellipsis: true,
          width: 300,
          scopedSlots: {
            customRender: 'productionProcess',
          },
        },
        {
          title: '单位',
          dataIndex: 'unitName',
          ellipsis: true,
          width: 110,
          scopedSlots: {
            customRender: 'unitName',
          },
        },
        {
          title: '计划生产数量',
          width: 150,
          dataIndex: 'planProduceNum',
          scopedSlots: {
            customRender: 'planProduceNum',
          },
        },
        {
          title: '计划开始时间',
          width: 150,
          dataIndex: 'planStartTime',
          scopedSlots: {
            customRender: 'planStartTime',
          },
        },
        {
          title: '计划完成时间',
          width: 150,
          dataIndex: 'planEndTime',
          scopedSlots: {
            customRender: 'planEndTime',
          },
        },
        {
          title: '已生产数量',
          width: 150,
          dataIndex: 'qualifiedNum',
          scopedSlots: {
            customRender: 'qualifiedNum',
          },
        },
        {
          title: '关联订单',
          width: 150,
          dataIndex: 'saleOrderCode',
          scopedSlots: {
            customRender: 'saleOrderCode',
          },
        },
        {
          title: '创建时间',
          width: 150,
          dataIndex: 'createTime',
          sorter: true,
          scopedSlots: {
            customRender: 'createTime',
          },
        },
        {
          title: '更新时间',
          width: 150,
          dataIndex: 'updateTime',
          sorter: true,
          scopedSlots: {
            customRender: 'updateTime',
          },
        },
        {
          title: '创建人',
          width: 150,
          dataIndex: 'createByName',
          scopedSlots: {
            filterDropdown: 'selectPeople',
            filterIcon: 'selectIcon',
            customRender: 'createByName',
          },
        },
        {
          title: '更新人',
          width: 150,
          dataIndex: 'updateByName',
          scopedSlots: {
            filterDropdown: 'selectPeople',
            filterIcon: 'selectIcon',
            customRender: 'updateByName',
          },
        },
        {
          fixed: 'right',
          title: '操作',
          width: 50,
          dataIndex: 'actions',
          ellipsis: true,
          scopedSlots: { customRender: 'actions' },
        },
      ],
      filterForm: {
        orderCode: '',
        serialNumber: '',
        serialName: '',
        reportTime: '',
        reportTimeBegin: startDate,
        reportTimeEnd: endDate,
        // category: [], //分类
        // goodsType: [], //类型
      },
      filteredFormLable: {
        orderCode: '工单编号',
        serialNumber: '物品编号',
        serialName: '物品名称',
        reportTime: '报工日期',
        // category: '分类',
        // goodsType: '类型',
        serialSpecifications: '规格',
      },
      sortForm: {
        sortType: '',
        sortColumn: '',
      },
      dateForm: {
        reportTime: [startDate, endDate],
      } /* 筛选日期绑定对象 */,
      statusList: [
        {
          label: '未开始',
          value: '0',
        },
        {
          label: '生产中',
          value: '1',
        },
        {
          label: '已取消',
          value: '3',
        },
        {
          label: '已完成',
          value: '4',
        },
      ],
      customSelectList: [],
      applyStatusList: [],
      dealStatusList: [],
      loginUser: '',
      tableKey: 1.9,
      formType: 3,
    }
  },
  components: {
    SetColumn,
    crumbs,
    workOrderDetail: (resolve) => require(['@/views/workManagement/workOrder/workOrderDetail'], resolve),
  },
  computed: {
    scrollX() {
      let xnum = 0
      for (let item of this.columns) {
        xnum += Number(item.width) || 0
      }
      return xnum
    },
    ...mapState({
      collapsed: (state) => state.user.collapsedAno,
    }),
    filteredList() {
      let list = []
      for (let key in this.filterForm) {
        if (this.filteredFormLable[key] == '类型') {
          console.log('类型', this.typeList)
          let strArr = ''
          for (let item of this.filterForm[key]) {
            for (let each of this.typeList) {
              if (item == each.value) {
                strArr += each.title + '，'
              }
            }
          }
          strArr = strArr.substring(0, strArr.length - 1)
          list.push({
            title: this.filteredFormLable[key],
            text: strArr,
            key,
          })
        }
        // else if (this.filteredFormLable[key] == '分类' && key == 'category') {
        //   console.log('分类')
        //   list.push({
        //     title: this.filteredFormLable[key],
        //     text: this.treeSelectLael,
        //     key,
        //   })
        // }
        else if (key == 'reportTime') {
          list.push({
            title: this.filteredFormLable[key],
            text: this.filterForm.reportTimeBegin
              ? moment(this.filterForm.reportTimeBegin).format('YYYY-MM-DD') +
                '-' +
                moment(this.filterForm.reportTimeEnd).format('YYYY-MM-DD')
              : '',
            key,
          })
        } else if (key == 'reporter') {
          list.push({
            title: this.filteredFormLable[key],
            text: this.userNames,
            key,
          })
        } else if (key == 'reportTimeBegin' || key == 'reportTimeEnd') {
          // 什么都不干
        } else if (key == 'createTimeStart' || key == 'createTimeEnd') {
          // 什么都不干
        } else if (key == 'deviceCategory' || (key == 'programStatus' && this.filterForm[key])) {
          list.push({
            title: this.filteredFormLable[key],
            text: this.statusToTxt(key, this.filterForm[key]),
            key,
          })
        } else {
          list.push({
            title: this.filteredFormLable[key],
            text: this.filterForm[key],
            key,
          })
        }
      }
      return list
    },
    filteredNums() {
      let nums = 0
      for (let key in this.filterForm) {
        if (this.filterForm[key] != '' && this.filterForm[key] != null && this.filterForm[key] != undefined) {
          console.log(key, '000')
          nums += 1
          if (key == 'reportTimeBegin') {
            nums -= 1
          }
        }
      }
      return nums
    },
  },
  created() {
    let user = localStorage.getItem('pro__Login_Userinfo')
    this.loginUser = JSON.parse(user).value.id
    // this.initData()
    this.requestData()
    this.getData()
  },
  methods: {
    progressFormat(_, a, b) {
      if (b === 0) {
        return 'X'
      }
      return `${Math.floor((a / b) * 100)}%`
    },
    getStatusColor(status) {
      let colorList = {
        0: '#ff943e',
        1: '#1890ff',
        2: '#00b042',
        3: '#888888',
      }
      return colorList[status] || ''
    },
    //数字千分位
    addThousandSeparator(number) {
      // 先将数字转为字符串，并判断是否有小数部分
      let [integerPart, decimalPart] = number.toString().split('.')

      // 对整数部分添加千分位分隔符
      integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

      // 如果有小数部分，则拼接整数部分和小数部分
      if (decimalPart) {
        return integerPart + '.' + decimalPart
      } else {
        return integerPart
      }
    },
    //创建人 筛选
    createChange(storeVals, row) {
      this.current = 1
      this.requestData()
    },
    //操作人 筛选
    updateChange(storeVals, row) {
      this.current = 1
      this.requestData()
    },
    tabChange(key) {
      this.requestData()
    },
    checkStatus(value) {
      if (value === 0) {
        return '#DFDFDF';
      } else if (value > 0 && value < 100) {
        return '#1890FF';
      } else if (value === 100) {
        return '#00B042';
      } else if (value > 100) {
        return '#FF4D4F';
      }
    },
    treeChange(value, label, extra) {
      this.treeSelectLael = label[0]
    },
    // 限制开始日期
    disabledStartDate(current) {
      let nowMon = new Date()
      if (moment(nowMon).isBefore(moment(current))) {
        return true
      }
      return false
    },
    // 导出
    handleExport(e) {
      let that = this
      // 获取动态列
      let filedKeysList = []
      that.columns.forEach((item) => {
        // if (item.dataIndex == 'category') {
        //   item.dataIndex = 'categoryText'
        // }
        filedKeysList.push(item.dataIndex)
      })
      // filedKeysList.pop()//删除最后一个的操作列
      that.filedKeys = filedKeysList.join(',')
      //设置文件名
      if (this.filterForm.reportTimeBegin) {
        that.fileName = `${formatDate(this.filterForm.reportTimeBegin, 'YYYY-MM-DD')}-${formatDate(
          this.filterForm.reportTimeEnd,
          'YYYY-MM-DD'
        )} 产能报表`
      } else {
        that.fileName = '产能报表'
      }
      if (!e || e.length === 0) {
        that.handleExportAll()
        that.selectExportVisiable = false
      } else {
        that.selectExportTitle = `已选中${e.length}条数据`
        that.selectExportVisiable = true
        that.selectExportParam = {
          ...that.filterForm,
          ...that.sortForm,
          selectedList: e,
          fileName: that.fileName, //文件名
          filedKeys: that.filedKeys, //动态列
        }
        // if (that.selectExportParam.sortColumn) {
        //   // 去除sortColumn中的后四位
        //   that.selectExportParam.sortColumn = that.selectExportParam.sortColumn.substring(
        //     0,
        //     that.selectExportParam.sortColumn.length - 4
        //   )
        // }
        // 删除that.selectExportParam中的空子段
        for (let key in that.selectExportParam) {
          if (
            that.selectExportParam[key] == '' ||
            that.selectExportParam[key] == null ||
            that.selectExportParam[key] == []
          ) {
            delete that.selectExportParam[key]
          }
        }
      }
    },
    handleSelectExport() {
      this.selectExportVisiable = false
      downFilePost('/mess/messProductReport/exportYieldReportXls', this.selectExportParam).then((data) => {
        if (data.type == 'application/json') {
          const reader = new FileReader() //创建一个FileReader实例
          reader.readAsText(data, 'utf-8') //读取文件,结果用字符串形式表示
          reader.onload = function () {
            //读取完成后,**获取reader.result**
            const msg = JSON.parse(reader.result)
            this.$antdMessage.error(msg.message) //弹出错误提示
          }
          return
        }
        if (!data) {
          this.$antdMessage.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data]), this.fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', this.fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
    handleExportAll() {
      let that = this
      that.selectExportVisiable = false
      that.$antdConfirm({
        title: `确定全部数据?`,
        onOk() {
          let param = {
            ...that.filterForm,
            ...that.sortForm,
            fileName: that.fileName,
            filedKeys: that.filedKeys,
          }
          // 删除param中的空子段
          for (let key in param) {
            if (param[key] == '' || param[key] == null || param[key] == undefined || param[key] == []) {
              delete param[key]
            }
          }
          // if (param.sortColumn) {
          //   // 去除sortColumn中的后四位
          //   param.sortColumn = param.sortColumn.substring(0, param.sortColumn.length - 4)
          // }
          console.log(param, '导出选中数据param')
          downFilePost('/mess/messProductReport/exportYieldReportXls', param).then((data) => {
            if (data.type == 'application/json') {
              const reader = new FileReader() //创建一个FileReader实例
              reader.readAsText(data, 'utf-8') //读取文件,结果用字符串形式表示
              reader.onload = function () {
                //读取完成后,**获取reader.result**
                const msg = JSON.parse(reader.result)
                that.$antdMessage.error(msg.message) //弹出错误提示
              }
              return
            }
            if (!data) {
              that.$antdMessage.error('导出失败')
              that.selectExportVisiable = false
              return
            }
            if (typeof window.navigator.msSaveBlob !== 'undefined') {
              window.navigator.msSaveBlob(new Blob([data]), that.fileName + '.xls')
              that.selectExportVisiable = false
            } else {
              let url = window.URL.createObjectURL(new Blob([data]))
              let link = document.createElement('a')
              link.style.display = 'none'
              link.href = url
              link.setAttribute('download', that.fileName + '.xls')
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link) //下载完成移除元素
              window.URL.revokeObjectURL(url) //释放掉blob对象
              that.selectExportVisiable = false
            }
          })
        },
        onCancel() {},
      })
    },

    handleOpen(v, status) {
      let that = this
      let title = status == '0' ? '启用' : '禁用'
      that.$antdConfirm({
        title: `确定${title}此点巡检方案吗?`,
        // content: `共选中${v.length}条点巡检项目`,
        onOk() {
          let param = {
            id: v.id,
            status: status,
          }
          APILX.deviceCheckProgramUpdateStatus(param).then((res) => {
            if (res.code == 200) {
              that.$antdMessage.success('操作成功')
              that.handleSearch()
            } else {
              that.$antdMessage.error(res.message)
            }
          })
        },
        onCancel() {},
      })
    },
    changeSelect(v, key) {
      if (v.length == 0 || v == '' || v == undefined) {
        // this.filterForm[key] = undefined
        this.filterForm[key] = []
      }
    },
    selectkeys(key) {
      if (key == 'goodsTypeText') {
        return 'goodsType'
      }
      //   else if (key == 'category') {
      //     return 'category'
      //   }
    },
    selectOptions(key) {
      if (key == 'deviceCategoryText') {
        return this.dictOptionsDeviceCategory
      } else if (key == 'flowStatusText') {
        return this.applyStatusList
      } else if (key == 'goodsTypeText') {
        return this.typeList
      }
    },
    /* 筛选类型回显文字 */
    statusToTxt(key, val) {
      var valList = []
      if (key == 'programStatus' && this.filterForm[key]) {
        for (let i = 0; i < val.length; i++) {
          const item = val[i]
          for (let j = 0; j < this.typeList.length; j++) {
            const txt = this.typeList[j]
            if (item == txt.value) {
              valList.push(txt.title)
            }
          }
        }
        return valList.join(',')
      } else if (key == 'deviceCategory' && this.filterForm[key]) {
        for (let i = 0; i < val.length; i++) {
          const item = val[i]
          for (let j = 0; j < this.dictOptionsDeviceCategory.length; j++) {
            const txt = this.dictOptionsDeviceCategory[j]
            if (item == txt.value) {
              valList.push(txt.title)
            }
          }
        }
        return valList.join(',')
      }
    },
    /* 类型颜色 */
    taskStatusCheck(v) {
      let checked = false
      if (v == '0') {
        checked = false
      } else if (v == '1') {
        checked = true
      }
      return checked ? '#ff943e' : '#00b042'
    },
    /* 出入库日期选择 */
    onOk(value, key) {
      if (value.length == 0) {
        this.filterForm[`reportTimeBegin`] = ''
        this.filterForm[`reportTimeEnd`] = ''
        this.filterForm[`reportTime`] = ''
        this.handleSearch()
        return
      }
      this.filterForm[`reportTimeBegin`] = moment(value[0]).startOf('day').format('YYYY-MM-DD')
      this.filterForm[`reportTimeEnd`] = moment(value[1]).endOf('day').format('YYYY-MM-DD')
      this.handleSearch()
    },
    /* 创建时间选择 */
    onOkCreate(value, key) {
      if (value.length == 0) {
        this.filterForm[`createTimeStart`] = ''
        this.filterForm[`createTimeEnd`] = ''
        this.filterForm[key] = ''
        return
      }
      this.filterForm[`createTimeStart`] = moment(value[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
      this.filterForm[`createTimeEnd`] = moment(value[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
    },
    // 排序
    tableChange(pagination, filters, sorter, { currentDataSource }) {
      console.log('看看这是啥33：', sorter)
      if (sorter.order) {
        let sortType = ''
        if (sorter.order == 'ascend') {
          sortType = 'ASC'
        } else {
          sortType = 'DESC'
        }
        this.sortForm = {
          sortType: sortType,
          sortColumn: camelCase2UnderLine(sorter.columnKey),
        }
        this.requestData()
      } else {
        this.sortForm = {
          sortType: '',
          sortColumn: '',
        }
        this.requestData()
      }
    },
    // table选择
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.checkBoxStatus()
    },
    // 全选
    // onCheckAllChange(e) {
    //   if (e.target.checked) {
    //     for (let item of this.modelList) {
    //       this.selectedRowKeys.push(item.id)
    //     }
    //   } else {
    //     for (let item of this.modelList) {
    //       this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
    //         return each != item.id
    //       })
    //     }
    //   }
    //   this.checkBoxStatus()
    // },
    // 全选
    onCheckAllChange(e) {
      if (e.target.checked) {
        for (let item of this.modelList) {
          this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
            return each != item.id
          })
          this.selectedRowKeys.push(item.id)
          this.selectedRows = this.selectedRows.filter((each) => {
            return each.id != item.id
          })
          this.selectedRows.push(item)
        }
      } else {
        for (let item of this.modelList) {
          this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
            return each != item.id
          })
          this.selectedRows = this.selectedRows.filter((each) => {
            return each.id != item.id
          })
        }
      }
      this.checkBoxStatus()
    },
    // 清空
    clearArr() {
      this.selectedRowKeys = []
      this.selectedRows = []
      this.checkBoxStatus()
    },
    checkBoxStatus() {
      if (this.selectedRowKeys.length == 0) {
        this.listIndeterminate = false
        this.listCheckAll = false
      } else {
        let tableIds = []
        for (let item of this.modelList) {
          tableIds.push(item.id)
        }
        let checkValue = this.isInclude(tableIds, this.selectedRowKeys)
        if (checkValue) {
          this.listIndeterminate = false
          this.listCheckAll = true
        } else {
          this.listIndeterminate = true
          this.listCheckAll = false
        }
      }
    },
    isInclude(aa, bb) {
      return aa.every((item) => {
        return bb.some((sub) => {
          return sub === item
        })
      })
    },
    // 分页
    onChangePage(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.requestData(true)
    },
    onShowSizeChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.requestData(true)
    },
    handleSearch(selectedKeys, confirm, dataIndex, clearFilters) {
      this.current = 1
      this.requestData()
    },
    /* 打开筛选 */
    handleShowFilter() {
      this.showFilter = true
    },
    /* 关闭筛选 */
    closeFilter() {
      this.showFilter = false
    },
    /* 确定筛选 */
    handleFilter() {
      this.handleSearch()
      this.showFilter = false
    },
    /* 删除已选 */
    delFiltered(key) {
      if (key == 'orderCode') {
        this.filterForm[key] = []
      } else if (this.filteredFormLable[key] == '物品编号') {
        this.filterForm[key] = []
      } else if (this.filteredFormLable[key] == '物品名称') {
        this.filterForm[key] = []
      }
      //    else if (this.filteredFormLable[key] == '分类') {
      //     this.filterForm[key] = []
      //     this.treeSelectLael = ''
      //   }
      else if (this.filteredFormLable[key] == '类型') {
        this.filterForm[key] = []
      } else if (this.filteredFormLable[key] == '报工日期') {
        this.filterForm.reportTimeBegin = ''
        this.filterForm.reportTimeEnd = ''
        this.filterForm[key] = ''
        this.dateForm[key] = null
      } else if (key == 'programStatus' || key == 'deviceCategory') {
        this.filterForm[key] = undefined
      } else if (key == 'reportTimeBegin') {
      } else if (key == 'reportTimeEnd') {
      } else {
        this.filterForm[key] = ''
      }
    },
    /* 重置筛选 */
    resetFilter() {
      this.filterForm = {
        orderCode: '', //工单编号
        serialNumber: '', //物品编号
        serialName: '', //物品名称
        serialSpecifications: '',
        // category: [], //分类
        goodsType: [], //类型
        reportTimeBegin: '',
        reportTimeEnd: '',
        reportTime: '',
      }
      //   this.treeSelectLael = ''
      this.dateForm = {}
      this.handleSearch()
    },
    /* 初始/加载设置列 */
    initData() {
      var oldValue = localStorage.getItem(this.BUSI_CONST.Entity.PRODUCTION_BOARD)
      this.columns = getNewColumns(this.allColumn, JSON.parse(oldValue), [], this.columns)
      /* 客户下拉 */
      API.erpCustomerList({ pageSize: 999, pageNo: 1 }).then((res) => {
        if (res.code == 200) {
          this.customSelectList = res.result.records
        }
      })
      ajaxGetDictItems('erp_apply_status').then((res) => {
        if (res.result) {
          this.applyStatusList = res.result
        }
      })
      ajaxGetDictItems('erp_contract_status').then((res) => {
        if (res.result) {
          this.dealStatusList = res.result
        }
      })
      // 字典接口
      getDictModel({ dictCode: 'mess_device_category' }).then((res) => {
        this.dictOptionsDeviceCategory = res.result
      })
      // 字典接口 类型
      getDictModel({ dictCode: 'wms_goods_type' }).then((res) => {
        this.typeList = res.result
      })
      this.getTreeData()
    },
    getTreeData() {
      // 取分类树
      categoryGetTree({ code: 'B05' }).then((res) => {
        let arr = res.result
        arr.map((item) => {
          if (item.children.length > 0) {
            item.disabled = true
            ;(function bianli(e = item) {
              e.children.forEach((item) => {
                if (item.children.length > 0) {
                  item.disabled = true
                  bianli(item)
                }
              })
            })()
          }
        })
        this.treeData = arr
      })
    },
    /* 请求列表数据 */
    requestData(check) {
      let parameter = {
        pageNo: this.current,
        pageSize: this.pageSize,
        startTime: this.filterForm.reportTimeBegin,
        endTime: this.filterForm.reportTimeEnd,
        orderStatus: this.activeKey ? (this.activeKey == 1 ? 1 : '') : 0,
        threeDays: this.activeKey == 2 ? true : false, //3天内到期
        overdue: this.activeKey == 3 ? true : false, //逾期未完工
        today: this.activeKey == 4 ? true : false, //今日完成
        month: this.activeKey == 5 ? true : false, //本月完成
        ...this.filterForm,
        ...this.sortForm,
      }
      if (parameter.deviceCategory) {
        parameter.deviceCategory = parameter.deviceCategory.join(',')
      }
      // if (parameter.sortColumn) {
      //   // 去除sortColumn中的后四位
      //   parameter.sortColumn = parameter.sortColumn.substring(0, parameter.sortColumn.length - 4)
      // }
      if (parameter.goodsType) {
        parameter.goodsType = parameter.goodsType.join(',')
      }
      delete parameter.reportTime
      delete parameter.reportTimeBegin
      delete parameter.reportTimeEnd

      let par = stringToObject(parameter)
      //工单进度报表
      APILX.getBoardorderList(par).then((res) => {
        if (res.code == 200) {
          if (res.result.total) {
            this.total = res.result.total
          } else {
            this.total = 0
          }
          this.modelList = res.result
          if (check) {
            this.checkBoxStatus()
          }
        }
      })
    },
    getData() {
      // 统计数据
      APILX.getBoardStatistics().then((res) => {
        if (res.code == 200) {
          this.topArray[0].number = res.result.plannedNum || '0'
          this.topArray[1].number = res.result.qualifiedNum || '0'
          this.topArray[2].number = res.result.failureRate + '%' || '0' + '%'
          this.topArray[3].number = res.result.orderNum || '0'
          this.topArray[4].number = res.result.overdueNum || '0'
        }
      })
      //生产实况
      APILX.getBoardreportWork().then((res) => {
        if (res.code == 200) {
          this.timeLineList = res.result
        }
      })
    },
    /* 打开设置列面板 */
    showColumn() {
      this.showSetColumn = true
      this.$nextTick(() => {
        this.$refs.SetColumn.paramsData(this.allColumn, this.BUSI_CONST.Entity.PRODUCTION_BOARD, this.columns)
      })
    },
    /* 设置列 */
    sureBtn(emitArr) {
      this.columns = getNewColumns(this.allColumn, emitArr, [])
      console.log(this.columns)
      localStorage.setItem(this.BUSI_CONST.Entity.PRODUCTION_BOARD, JSON.stringify(emitArr))
      this.tableKey += 1
    },
    /* 新建 */
    handleAdd() {
      this.$openWay(this, true, '/inspectionProgramForm')
    },
    /* 编辑 */
    handleEdit(v) {
      this.$openWay(this, true, '/inspectionProgramForm', { id: v.id })
    },
    /* 详情 */
    handleDetail(v) {
      this.$refs.workOrderDetail.initDetail(v)
      // this.$openWay(this, true, '/workOrderDetail', { id: v.orderId, backPath: 'outputReport' })
    },
    /* 删除、批量删除 */
    handleDelete(v) {
      if (v instanceof Array) {
        if (v.length > 0) {
          let that = this
          that.$antdConfirm({
            title: '确定要删除点巡检方案吗?',
            content: `共选中${v.length}条点巡检方案`,
            onOk() {
              APILX.messDeviceCheckProgramDeleteBatch(v.toString()).then((res) => {
                if (res.code == 200) {
                  that.$antdMessage.success('删除成功！')
                  that.handleSearch()
                  that.clearArr()
                } else {
                  that.$antdMessage.error(res.message)
                }
              })
            },
            onCancel() {},
          })
        } else {
          this.$antdMessage.warning('请勾选需要批量删除的数据')
        }
      } else {
        let that = this
        that.$antdConfirm({
          title: '确定要删除此点巡检方案吗?',
          content: ``,
          onOk() {
            APILX.messDeviceCheckProgramDelete(v.id).then((res) => {
              if (res.code == 200) {
                that.$antdMessage.success('删除成功！')
                that.handleSearch()
                that.clearArr()
              } else {
                that.$antdMessage.error(res.message)
              }
            })
          },
          onCancel() {},
        })
      }
    },
    //点击返回按钮
    goBack() {
      console.log('goback')
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
// @import '~@assets/less/common.less';
/deep/.ant-progress-text {
  color: #333 !important;
}
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.header {
  width: 150%;
  margin: -12px -12px @distance4;
}
.backBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .backC {
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}
.j-table-force-nowrap {
  //   margin-top: @distance1;
}
.btns {
  margin-left: @distance5;
}
.right-btn {
  float: right;
  display: flex;
  justify-content: flex-end;
}
.mg-left {
  margin-left: @distance3;
}
.filter-tit {
  background: #fff;
  border-bottom: 1px solid @greyBorder;
  font-size: @fontSize4;
}
.filter-num {
  color: @normalFont;
}
.filter-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.margin-btn {
  margin-right: @distance5;
}
.filter-tag {
  display: inline-block;
  position: relative;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: @fontSize1;
  line-height: @fontSize1;
  max-width: 100%;
  background: @greyBg;
  color: @titFont;
  cursor: pointer;
  .tag-text {
    display: inline-block;
    padding-right: 20px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .anticon-close {
    position: absolute;
    right: 8px;
    top: 8px;
  }
}
.tag-wrap:nth-of-type(n + 2) {
  margin-top: 10px;
}
.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}
// /deep/ .ant-card-body {
//   height: calc(100vh - 214px);
//   overflow: hidden;
//   padding: 20px 16px;
// }
.pubColor {
  font-size: 14px;
  color: #1890ff;
  cursor: pointer;
}

div.topBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-bottom: 16px;
  box-sizing: border-box;
  padding: 23px 0;
  background: #fff;
  div.itemBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    box-sizing: border-box;
    height: 44px;
    // padding: 0px 60px;
    position: relative;
    border-right: 1px solid #eeeeee;

    div.rightBox {
      text-align: center;
      height: 44px;
      cursor: pointer;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: flex-start;
      margin-left: 16px;
      div.rightTop {
        font-size: 24px;
        color: #191f25;
        line-height: 24px;
        margin-top: 12px;
      }

      div.rightBot {
        font-size: 14px;
        color: #888888;
      }
    }
  }
}
.topBox .itemBox:last-child {
  border: none;
}
.topSearch {
  padding: 0 0 10px 38px;
}
.table-operator {
  .ant-card-head .ant-tabs {
    font-weight: bold;
  }
  // /deep/.ant-tabs-bar .ant-tabs-top-bar {
  //   // margin-bottom: 2px !important;
  // }
}
/deep/ .ant-card-head-title {
  padding: 2px 0;
}

.ant-timeline .ant-timeline-item {
  /deep/ .ant-timeline-item-head {
    background-color: #1890ff;
  }
}
.time-line-list {
  display: flex;
  margin-top: 10px;
  margin-right: 10px;
  justify-content: flex-start;
  align-items: center;
  .time-line-conent {
    flex: 0.4;
    margin-right: 20px;
  }
  .time-line-conent-num {
    flex: 0.6;
    margin-right: 20px;
  }
}
.top-title {
  /deep/ .ant-card-head-title {
    padding: 16px 0;
  }
}
</style>
